<template>
  <div>
    <div class="rightbody">
      <ul class="interaction">
        <li>
          <label>拨打电话</label>
          <div>
            <a @click="addPhoneButton"><img src="../assets/images/intericon1.png"/></a>
          </div>
        </li>
        <li>
          <label>跳转链接</label>
          <div>
            <a @click="addLinkButtonButton"><img src="../assets/images/intericon2.png"/></a>
          </div>
        </li>
        <li>
          <label>点赞</label>
          <div>
            <a @click="addDianzanButton"><img src="../assets/images/intericon3.png"/></a>
          </div>
        </li>
        <li @click="addCountDown">
          <label>倒计时</label>
          <div>
            <span class="num">20</span>
            <span class="text">天</span>
            <span class="num">20</span>
            <span class="text">时</span>
            <span class="num">20</span>
            <span class="text">分</span>
            <span class="num">20</span>
            <span class="text">秒</span>
          </div>
        </li>
        <li @click="addMap">
          <label>地图</label>
          <div>
            <a><img src="../assets/images/map.png"/></a>
          </div>
        </li>
        <li>
          <label>页面效果</label>
          <div class="pageeffect">
            <Radio-group v-model="changePage" @on-change="autoPageChange">
              <Radio label="位移切换"></Radio>
              <Radio label="淡入"></Radio>
              <Radio label="方块"></Radio>
              <Radio label="3d流"></Radio>
              <Radio label="3d翻转"></Radio>
            </Radio-group>
          </div>
            <Checkbox style="width:260px;text-indent:5px;margin-bottom:0;" @on-change="showPageChange" v-model="showPage">显示页码</Checkbox>
            <Checkbox style="width:260px;text-indent:5px;margin-bottom:0;" @on-change="autoPlayChange" v-model="autoPlay">自动播放</Checkbox>
            <Input-number :max="60" :min="1" :step="1" v-model="autoplayS" style="width:80px;margin:10px 10px 0;" v-if="autoPlay" @on-change="aniDurationChange"/>
            <Checkbox style="width:260px;text-indent:5px;margin-bottom:0;" @on-change="loopPlayChange" v-model="loopPlay">循环播放</Checkbox>
        </li>
      </ul>
    </div>
    <div v-if="showmap">
      <selectmap :showmap="showmap" @close="close" :option="mapOption"></selectmap>
    </div>

  </div>
</template>


<script>
  import selectmap from './common/SelectMap'
  import {mapActions, mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        "sceneInfo"
      ])
    },
    components: {
      selectmap,
    },
    data(){
      return {
        showmap: false,
        changePage: "位移切换",
        showPage: 0,
        autoPlay: false,
        autoplayS: 0,
        loopPlay: 0,
        mapOption:'add'
      }
    },
    mounted(){
      this.initData();
    },
    methods: {
      initData(){
        var sceneData = this.$store.state.workData.sceneinfo;
        this.showPage = sceneData.is_page;
        switch (sceneData.page_mode) {
          case 1:
            this.changePage = "位移切换";
            break;
          case 2:
            this.changePage = "淡入";
            break;
          case 3:
            this.changePage = "方块";
            break;
          case 4:
            this.changePage = "3d流";
            break;
          case 5:
            this.changePage = "3d翻转";
            break;
        }
        sceneData.autoplay > 0 ? this.autoPlay = true : this.autoPlay = false;
        this.autoplayS = sceneData.autoplay;
        this.loopPlay = sceneData.is_loop;
      },
      autoPageChange(value){
        var v = 0;
        switch (value) {
          case "位移切换":
            v = 1;
            break;
          case "淡入":
            v = 2;
            break;
          case "方块":
            v = 3;
            break;
          case "3d流":
            v = 4;
            break;
          case "3d翻转":
            v = 5;
            break;
        }
        var params = {};
        params.keys = ["page_mode"];
        params.values = [v];
        this.$store.dispatch("changeSceneInfo", params)
      },
      showPageChange(value){
        this.showPage = value;
        var v = this.showPage == true ? 1 : 0;
        var params = {};
        params.keys = ["is_page"];
        params.values = [v];
        this.$store.dispatch("changeSceneInfo", params)
      },
      autoPlayChange(value){
        this.autoplay = value;
        var v;
        if (this.autoplay) {
          v = this.autoplayS;
        } else {
          v = 0;
        }
        var params = {};
        params.keys = ["autoplay"];
        params.values = [v];
        this.$store.dispatch("changeSceneInfo", params)
      },
      aniDurationChange(value){
        var v = value;
        var params = {};
        params.keys = ["autoplay"];
        params.values = [v];
        this.$store.dispatch("changeSceneInfo", params);
      },
      loopPlayChange(value){
        var v = value == true ? 1 : 0;
        var params = {};
        params.keys = ["is_loop"];
        params.values = [v];
        this.$store.dispatch("changeSceneInfo", params)
      },
      addMap(){
        this.showmap = true;
      },
      xx(){
        // this.$store.dispatch('addCountDown',1512921600000);
      },
      addPhoneButton(){

        var params = {};
        params.type = 1;
        this.$store.dispatch('addComponent', params);
      },
      addLinkButtonButton(){

        var params = {};
        params.type = 2;
        this.$store.dispatch('addComponent', params);
      },
      addDianzanButton(){
        var params = {};
        params.type = 3;
        this.$store.dispatch('addComponent', params);
      },
      addCountDown(){

        var params = {};
        params.type = 4;
        this.$store.dispatch('addComponent', params);
      },
      close(){
        this.showmap = false;
      }
    }
  }
</script>


<style type="text/javascript">
  .num {
    font-size: 30px;
  }

  .text {
    font-size: 16px;
  }

  .interaction li {
    display: block;
    width: 260px;
    margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e1e1;
  }

  .interaction li>label {
    display: block;
    height: 44px;
    line-height: 44px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 15px;
    color: #696969;
    font-weight: bold;
    text-indent: 10px;
  }

  .interaction li .pageeffect{width: 260px;overflow: hidden;}
  .interaction li .pageeffect a{float: left;width: 55px;font-size: 13px; margin: 0 5px 10px;text-align: center;color: #696969;}
  .interaction li .pageeffect a:hover,.interaction li .pageeffect a.on{color: #1abd9b;}

</style>
